import React from 'react';
import { connect } from 'dva';
import { Form, Input, Modal, InputNumber, Select } from 'antd';

const FormItem = Form.Item;
const { TextArea } = Input;
const COMMON_COMMENTS = [
  '空值、负值、0值调整',
  '开始涨价',
  '涨价影响扩大',
  '涨价影响缩小',
  '开始降价',
  '降价影响扩大',
  '降价影响缩小',
  '活动影响扩大',
  '活动影响缩小',
  '新品扩大',
  '新品缩小',
];

@Form.create()
@connect(({ gmvConf, loading }) => ({
  gmvConf,
  loading: loading.models.gmvConf,
}))
class AdjustedValueForm extends React.Component {
  static defaultProps = {
    values: {
      id: 0,
    },
    modalVisible: false,
    handleOpt: () => {},
    handleModalVisible: () => {},
  };

  constructor(props) {
    super(props);
    this.formLayout = {
      labelCol: { span: 7 },
      wrapperCol: { span: 13 },
    };
  }

  componentDidMount() {
    const {
      dispatch,
      values: { id },
    } = this.props;
    dispatch({
      type: 'gmvConf/getById',
      payload: id,
    });
  }

  okHandle = () => {
    const {
      values: { id },
      form,
      handleOpt,
    } = this.props;
    form.validateFields((err, fieldsValue) => {
      if (err) return;
      form.resetFields();
      handleOpt({
        id,
        ...fieldsValue,
      });
    });
  };

  onCommonCommentsChange = val => {
    const { form } = this.props;
    form.setFieldsValue({ comments: val });
  };

  render() {
    const { modalVisible, handleModalVisible, values, form } = this.props;
    return (
      <Modal
        destroyOnClose
        maskClosable={false}
        width={440}
        style={{ top: 20 }}
        bodyStyle={{ padding: '10px 40px' }}
        title="商品销量调整"
        visible={modalVisible}
        onCancel={() => handleModalVisible(false, values)}
        onOk={this.okHandle}
      >
        <div>
          <div style={{ padding: '10px 2px' }}>
            <span>
              <strong>{values.forecastDate}</strong>【{values.skuName}】预测值
            </span>
            <span style={{ color: 'red' }}>{values.forecastSale}份</span>
          </div>

          <FormItem key="forecastSale2" {...this.formLayout} label="建议预测值">
            {values.forecastSaleSuggest}
          </FormItem>

          <FormItem key="forecastSale" {...this.formLayout} label="新预测值">
            {form.getFieldDecorator('forecastSale', {
              initialValue: values.forecastSale,
              rules: [{ required: true, message: '请输入新预测值' }],
            })(<InputNumber style={{ width: '100%' }} placeholder="请输入" precision={0} />)}
          </FormItem>

          <FormItem key="commonComments" {...this.formLayout} label="选择便捷理由">
            <Select
              onChange={this.onCommonCommentsChange}
              placeholder="选择便捷理由"
              style={{ width: '100%' }}
              allowClear
            >
              {COMMON_COMMENTS.map(item => (
                <Select.Option value={item} key={item}>
                  {item}
                </Select.Option>
              ))}
            </Select>
          </FormItem>

          <FormItem key="comments" {...this.formLayout} label="修改理由">
            {form.getFieldDecorator('comments', {
              rules: [{ message: '请输入修改理由' }],
            })(<TextArea placeholder="请输入" />)}
          </FormItem>
        </div>
      </Modal>
    );
  }
}

export default AdjustedValueForm;
